<template>
  <view>
    <view class="segmented_wrap">
      <uni-segmented-control
        :current="current"
        :values="title"
        @clickItem="onClickItem"
        style-type="text"
        active-color="#268bd2"
      ></uni-segmented-control>
    </view>
    <view class="content">
      <view v-if="current !== 4">
        <!-- 将参数传递到对应的选项卡 -->
        <video-main :urlObj="{url:items[current].path,params:items[current].params}"></video-main>
      </view>
      <view v-else>
        <video-category></video-category>
      </view>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from '@dcloudio/uni-ui'
// 导入自定义的两个组件
import videoMain from './video-main/index'
import videoCategory from './video-category/index'
export default {
  components: {
    uniSegmentedControl,
    videoMain,
    videoCategory
  },
  data () {
    return {
      items: [
        { title: '推荐', path: '/videoimg/v1/videowp/featured', params: { limit: 30, skip: 0, order: 'hot' } },
        { title: '娱乐', path: '/videoimg/v1/videowp/category/59b25abbe7bce76bc834198a', params: { limit: 30, skip: 0, order: 'new' } },
        { title: '最新', path: '/videoimg/v1/videowp/videowp', params: { limit: 30, skip: 0, order: 'new' } },
        { title: '热门', path: '/videoimg/v1/videowp/videowp', params: { limit: 30, skip: 0, order: 'hot' } },
        { title: '分类', path: '/videoimg/v1/videowp/category', params: {} }
      ],
      current: 0
    }
  },
  methods: {
    onClickItem (e) {
      this.current = e.currentIndex
      // console.log(this.current);

    }
  },
  computed: {
    title () {
      return this.items.map(item => {
        return item.title
      })
    }
  }

}
</script>

<style lang="scss" scope>
.segmented_wrap {
  width: 60vw;
  margin: 0 auto;
}
</style>